<template>
  <div class="goodsInfo-container">

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
        <!-- 不删除元素，还继续保留元素，只是隐藏了 -->
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>

    <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :carouselList="carouselList" :isfull="false"></swiper>
        </div>
      </div>
    </div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            <span>市场价：<del>￥{{ goodsInfo.market_price }}</del></span>&nbsp;&nbsp;
            <span class="now">销售价：<b>￥{{ goodsInfo.sell_price }}</b></span>
          </p>
          <p>购买数量：<numbox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numbox></p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            <!-- 分析：如何实现加入购物车时候，拿到 选择的数量 -->
            <!-- 1. 经过分析发现：按钮属于 goodsinfo 页面，数字 属于 numberbox 组件 -->
            <!-- 2. 由于涉及到父子组件的嵌套了，所以，无法直接在 goodsinfo 页面 中 获取到 选中的商品的数量值 -->
            <!-- 3. 涉及到了 子组件向父组件传值了 （事件调用机制） -->
            <!-- 4. 事件调用的本质：父向子传递方法，子调用这个方法，同时 把 数据当作参数 传递给这个方法 -->
          </p>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsInfo.goods_no }}</p>
          <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
          <p>上架时间：{{ goodsInfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goodsDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goodsComment(id)">商品评论</mt-button>
      </div>
    </div>

  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'

export default {
  data() {
    return {
      id: this.$route.params.id, // 获取路由参数的id，根据id 获取 数据
      carouselList: [],  // 获取轮播图数据的数组
      goodsInfo: {}, // 获取的是数据详情的对象
      ballFlag: false, // 小球隐藏
      selectedCount: 1 // 保存用户选中的商品数量，默认，认为用户买1个
    }
  },
  created () {
    this.getCarouselList()
    this.getInfo()
  },
  methods: {
    // 获取轮播图数据
    getCarouselList() {
      this.$http.get('api/getthumimages/' + this.id).then(result => {
        if (result.body.status === 0) {
          result.body.message.forEach(item => {
            item.img = item.src
          })
          this.carouselList = result.body.message
        } else {
          Toast('获取轮播图数据失败了，请等待!')
        }
      })
    },
    getInfo() {
      this.$http.get('api/goods/getinfo/' + this.id).then(result => {
        if (result.body.status === 0) {
          this.goodsInfo = result.body.message[0]
        } else {
          Toast('获取数据详情失败了，请等待!')
        }
      })
    },
    goodsDesc(id) {
      // 点击使用 编程式导航 跳转到 图文介绍
      this.$router.push({ name: 'goodsDesc', params: { id } })
    },
    goodsComment(id) {
      // 点击 跳转到 商品评论
      this.$router.push({ name: 'goodsComment', params: { id } })
    },
    addToShopCar() {
      this.ballFlag = !this.ballFlag
    },
    beforeEnter(el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter(el, done) {
      el.offsetWidth

      // 小球动画优化思路：
      // 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经 局限在了某一分辨率下的，滚动条未滚动的情况下：
      // 2. 只要分辨率 和 测试的时候不一样，或者 滚动有一定的滚动距离之后，问题出现了
      // 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
      // 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
      // 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()

      // ref 代表的是 这个元素的 原生 DOM 属性 和 方法
      // console.log(this.$refs.ball);

      // 获取 小球的 页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      // 获取 徽标 在页面中的位置
      const badgePosition = document.querySelector('#badge').getBoundingClientRect()

      const xDist = badgePosition.left - ballPosition.left
      const yDist = badgePosition.top - ballPosition.top
      
      el.style.transform = `translate(${xDist}px, ${yDist}px)`
      el.style.transition = 'all 0.5s cubic-bezier(.17,.67,.75,.68)'

      done()
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag
    },
    getSelectedCount(count) {
      this.selectedCount = count

      console.log("父组件拿到的数量值为：" + this.selectedCount );
    }
  },
  components: {
    swiper,
    numbox
  }
}
</script>

<style lang="scss" scoped>
.goodsInfo-container {
  background-color: #eee;
  overflow: hidden;
  .ball {
    width: 18px;
    height: 18px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    top: 407px;
    left: 148px;
    // transform: translate(115px, 281px);
  }

  .price {
    .now {
      b {
        color: red;
        font-size: 16px;
      }
    }
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
}
</style>
